<template>
  <div>
    <el-dialog title="新增权限点" :visible="dialogVisible" @close="cancel">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="ruleForm.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="ruleForm.description" />
        </el-form-item>
        <el-form-item label="开启" prop="enVisible">
          <el-switch
            v-model="ruleForm.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addPermissionRequest,
  getPermissionDetailRequest,
  updatePermissionRequest
} from '@/api/permission'
export default {
  name: 'PermissonDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    sonData: {
      type: Object,
      default: () => {}
    },
    editId: {
      type: Number,
      default: null
    }
  },
  data() {
    const validateCode = (_, value, callback) => {
      if (
        !this.editId &&
        this.list.filter((item) => item.code === value).length > 0
      ) {
        return callback(new Error('权限标识已存在'))
      }
      const arr = this.list.filter((item) => item.code !== value)
      if (this.editId && arr.some((item) => item.code === value)) {
        return callback(new Error('权限标识已存在'))
      }
      callback()
    }
    return {
      ruleForm: {
        name: '',
        code: '',
        description: '',
        // 数字字符串和布尔值 一般默认为false
        type: null,
        pid: 0,
        enVisible: '0'
      },
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' },
          { validator: validateCode, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    sonData: {
      deep: true,
      immediate: true,
      handler(val) {
        this.ruleForm.pid = val.pid
        this.ruleForm.type = val.type
      }
    }
  },
  methods: {
    async getPermissionDetail(id) {
      const res = await getPermissionDetailRequest(id)
      this.ruleForm = res.data
    },
    cancel() {
      this.$emit('update:dialogVisible', false)
      this.$refs.ruleForm.resetFields()
      this.ruleForm = this.$options.data().ruleForm
    },
    async submit() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (!this.editId) {
            const res = await addPermissionRequest(this.ruleForm)
            this.$message.success(res.message)
            this.cancel()
            this.$emit('okk')
          } else {
            const res = await updatePermissionRequest(this.ruleForm)
            this.$message.success(res.message)
            this.cancel()
            this.$emit('okk')
          }
        } else {
          console.log('error submit!!')
        }
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
